<template>
    <div>
        <router-view></router-view>
        <div class="footer">
            <ul class="footer-nav">
                <li v-for="(item,index) in nav" :key="index" @click="changeNav(index)" >
                    <router-link :to="item.path">
                        <div>
                            <img :src="aIndex==index?item.iconActive:item.icon" />
                        </div>
                        <span v-bind:class="{'router-link-active': index==aIndex}">{{item.title}}</span>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: 'index',
    data() {
        return {
            // 导航列表
            nav: [
                { title: '首页', name: 'Home', path: '/main/home', icon: 'static/img/homeNav.png', iconActive: 'static/img/homeNavActive.png' },
                { title: '贷款', name: 'RecommentProduct', path: '/main/recommentproduct', icon: 'static/img/daikuanNav.png', iconActive: 'static/img/daikuanNavActive.png' },
                { title: '发现', name: 'Mine', path: '/main/discover/selected', icon: 'static/img/faxianNav.png', iconActive: 'static/img/faxianNavActive.png' },
                { title: '我的', name: 'Mine', path: '/main/mine', icon: 'static/img/wodeNav.png', iconActive: 'static/img/wodeNavActive.png' }
            ],
            aIndex: 0
        }
    },
    watch:{
        // 监听路由，如果路由变化则执行judgePage函数
        $route(){
            this.judgePage()
            //console.log(this.aIndex)
        }
    },
    methods: {
        // 导航点击后执行函数
        changeNav(index) {
            this.judgePage()
        },
        // 路由变化后的函数
        judgePage() {
            var hash = window.location.href.split('/').pop().split('?')[0];
            // 如果路有hash值是home，则aIndex = 0，其他以此类推
            if (hash == 'home') {
                this.aIndex = 0;
            } else if (hash == 'recommentproduct') {
                this.aIndex = 1;
            } else if (hash == 'selected'||hash == 'discuss') {
                this.aIndex = 2;
            } else if (hash == 'mine') {
                this.aIndex = 3;
            }
        }
    },
    mounted() {
        // 页面dom加载完后执行函数
        this.judgePage();
    }
}
</script>
<style lang="scss">
@import '../scss/variable/base.scss';
.footer {
    width: 100%;
    height: 1.3rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    ul {
        width: 100%;
        height: 100%; // padding-top: 0.05rem;
        li {
            float: left;
            list-style: none;
            width: 25%;
            height: 100%;
            a {
                display: inline-block;
                width: 100%;
                color: $navColor;
                height: 100%;
                font-size: 0.25rem;
                position: relative;
            }
            span {
                font-size: 0.32rem;
                position: absolute;
                top: 0.75rem;
                left: 50%;
                transform: translate(-50%, 0)
            }
            img {
                margin-top: 0.05rem;
                width: 0.7rem;
                height: 0.7rem;
            }
        }
    }
    .router-link {
        color: #cbcbcb;
    }
    .router-link-active {
        color: $primaryColor;
        border: none !important;
    }
}
</style>


